<template>
	<view class="all-box containers" >
		<view v-if="netWorkType!='none'"> 
			<!-- 顶部图片背景 -->
			 <view class="bg">
				 <image  :src="OSS_HOST+'health/family_bg.png'"   mode="widthFix"></image>
			 </view> 
			 
			 <!-- 未关联邀请 --> 
			 <view class="item-invite" v-if="active_type==1" > 
				 <view class="title">您还未关联家人</view>
				 <view class="desc">关联家人后，每当您的家人使用设备进行测试，并数据进行同步后，您将能够及时查看家人的测试数据</view>
				 <view class="wx-invite" @tap="wxInvite">微信邀请关联</view>
			 </view>
			 
			<!-- 家人邀请 -->
			<view class="item-change" v-else-if="active_type==2">
				 <view class="title">选择家人身份</view>
				 <view class="change-list">
					 <view class="list-item"   @tap="changeFamily(item,index)"  v-for="(item,index) in data.list" >
						 <view class="img"  > 
							<image :src="OSS_HOST+'health/'+item.url"  ></image>
						    <image class="active" v-if="item.active" :src="OSS_HOST+'health/family_active.png'"  ></image></view>
						 <view>{{item.name}}</view>
						 
					 </view>
				 
				 </view>
				 <view >
					 <view class="confirm-invite" v-if="familyName==''" @tap="checkChange">立即邀请</view>
					 <button class="confirm-invite"  open-type="share" v-else>
						 立即邀请
					 </button>
				 </view>
			</view>
			
			<!-- 同意邀请 -->
			<view class="item-change" v-else-if="active_type==3">
				 <view class="desc">您的家人向您申请关联您的血压数据，ta将能够及时了解您的血压健康状况！</view>
				 <view class="confirm-invite" @tap="confirmInvite">同意</view>
			</view>
		</view>
		
		<!-- 自定义弹窗 -->
		<tui-modal class="create-modal" :show="createModal"   @cancel="modalHide" custom="true" color="#333" :size="32"   shape="circle">
			 
			<view>
				<input type="text" class="input-txt" v-model="familyName" placeholder="请输入家人身份名称">
			</view>
			<view class="flex-box">
				<view class="btn-close" @tap="modalHide">取消</view>
				<view class="btn-submit" @tap="createSubmit" v-if="familyName==''">确定邀请</view>
				<button class="btn-submit"  open-type="share" v-else>
						确定邀请
				</button>
			</view>
		</tui-modal>
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		<!-- 登录弹窗 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom" />

	</view>
</template>
<script>
	import {oss_host} from '@/config/config.js';
	import Vue from 'vue'
	import store from '@/store/index.js';
	import tuiModal from "@/components/modal/modal"
	import {
		mapGetters
	} from 'vuex'; 
	export default {
		onShareAppMessage(res) {
				this.createModal = false
			 
				let path = '/packageHealthy/pages/device/blood-pressure/family/index?active_type=3&user_id='+this.user_id+'&name='+this.familyName; 
			 
				return {
					title: '我想邀请你进行家人关联', 
					path: path, 
					imageUrl:this.OSS_HOST+'health/share_bg.png'
				}
			 
			 
		},
		components: {
			 tuiModal
		},
		computed: { 
			//注册网络状态
			...mapGetters(['netWorkType', 'loginStatus'])
		},
		data() {
			return {
				OSS_HOST: oss_host,
				user_id:0,  //发送邀请用户id
				familyName:'',
				createModal:false,
				active_type:1, //1=未关联邀请页  2=家人邀请页 3=同意邀请
				data: {
					list:[
						{
							name:"爸爸",
							url:'family_1.png',
							active:false, 
						},
						{
							name:"妈妈",
							url:'family_2.png',
							 active:false, 
						},
						{
							name:"爷爷",
							url:'family_3.png',
							  active:false, 
						},
						{
							name:"奶奶",
							url:'family_4.png' ,
							 active:false, 
						},
						{
							name:"伴侣",
							url:'family_5.png' ,
							 active:false, 
						},
						 {
						 	name:"自定义",
						 	url:'family_6.png' ,
							 active:false, 
						 } 
					] 
				},
				 
 			}
		},
		onLoad(e) {
			 
			 if(e.active_type!=undefined){
				 this.active_type = e.active_type
			 }
			 if(e.user_id!=undefined){
			 	this.user_id = e.user_id
				 
			 }
			 if(e.name!=undefined){
			 	this.familyName = e.name
			 }
		      
		},
		onShow() {
 

		},
	 
		methods: { 
			//微信邀请
			wxInvite(){
				let _this = this
				this.$refer.setVilit('/blood-pressure/family/index')
				let callback = function(url) {
					 
				}
				let data = {
					active_type:2,
					user_id:this.user_id
				}
				this.$refer.toUrl(callback,data)
			},
		 
			//同意邀请
			confirmInvite(){
				 let _this = this
				 //检测是否的登录
				 if(!this.loginStatus){ 
					 
					uni.showModal({
						content:'您还没有登录，请登录后再操作',
						cancelText:'暂不登录',
						confirmText:'立即登录',
						 success (res) {
						    if (res.confirm) { 
							  _this.$refs.popupvLogin.open() 
						    } 
						  }
						})
						 
					 
					return ;
				 }
				
		 
				let opt = {
					url: '/user_member/confirmInvite', 
					data: {
						user_id:_this.user_id,
						name: _this.familyName
					},
					success: function(res) {
					 
						if (res.status == 1) {
							uni.showToast({
								title:'关联成功',
								icon:'none'
							}) 
							
						}else{
							if(res.code ==201){
								uni.showToast({
									title:res.message,
									icon:'none'
								}) 
							}else{
								uni.showToast({
									title:'已经关联过此家人',
									icon:'none'
								}) 
							}
							 
						}  
						
						setTimeout(function(){
							_this.$refer.setVilit('/blood-pressure/index')
							let callback = function(url) {
								 
							}
													 
							_this.$refer.toUrl(callback)
						},1000)
				
					}
				};
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}
			},
			checkChange(){
				if(this.familyName=='' || this.familyName==undefined){
					uni.showToast({
						title:'请选择家人身份',
						icon:'none'
					})
				}
			},
			changeFamily(item,index){
				this.familyName = item.name
				for(var i in this.data.list){
					this.data.list[i].active = false;
				}
				this.data.list[index].active = true;
				if(item.name=='自定义'){
					this.familyName=''
					this.createModal = true; 
				}
			},
		 
			modalHide(){
				this.createModal = false
			},
			createSubmit(){
				if(this.familyName=='' || this.familyName==undefined){
					uni.showToast({
						title:'请输入家人身份名称',
						icon:'none'
					})
				}
				
			}


		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
